// CheckPythonResult.jsx
import React, { useState } from 'react';
import { Row, Col, Button, Typography, Image } from 'antd';
import { LeftOutlined, RightOutlined, ManOutlined, WomanOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

/* 示例数据：加了一个“性别”字段 */
const data = [
  { 身高: 155, 体重: 40, 爱好: '阅读', 性别: '男', 图片路径: '/static/a.png', 姓名: '郭敬明' },
  { 身高: 162, 体重: 54, 爱好: '其他', 性别: '男', 图片路径: '/static/b.png', 姓名: '王祖蓝' },
  { 身高: 166, 体重: 70, 爱好: '运动', 性别: '女', 图片路径: '/static/c.png', 姓名: '贾玲' },
  { 身高: 226, 体重: 150, 爱好: '其他', 性别: '女', 图片路径: '/static/d.png', 姓名: '张子宇（中国女篮中锋）' },
];

const CheckPythonResult = () => {
  const [idx, setIdx] = useState(0);
  const [showRes, setShowRes] = useState(null); // null | '正确' | '错误'

  const cur = data[idx];
  const isFirst = idx === 0;
  const isLast  = idx === data.length - 1;

  const check = (guess) => {
    setShowRes(guess === cur.性别 ? '预测正确' : '预测失败');
  };

  return (
    <Row gutter={24} style={{ padding: 24, maxWidth: 1300, margin: '0 auto' }}>
      {/* 左侧参数 + 按钮 */}
      <Col span={8}>
        <Title level={3} style={{ marginBottom: 24 }}>参数</Title>
        <Title level={2}>身高：<Text>{cur.身高} cm</Text></Title>
        <Title level={2}>体重：<Text>{cur.体重} kg</Text></Title>
        <Title level={2}>爱好：<Text>{cur.爱好}</Text></Title>

        <div style={{ marginTop: 32 }}>
          <Button
            icon={<LeftOutlined />}
            disabled={isFirst}
            onClick={() => { setIdx(idx - 1); setShowRes(null); }}
          >
            上一个
          </Button>
          <Button
            icon={<RightOutlined />}
            disabled={isLast}
            onClick={() => { setIdx(idx + 1); setShowRes(null); }}
            style={{ margin: '0 12px' }}
          >
            下一个
          </Button>

          <Button type="primary" icon={<ManOutlined />} onClick={() => check('男')}>
            男
          </Button>
          <Button
            type="primary"
            danger
            icon={<WomanOutlined />}
            onClick={() => check('女')}
            style={{ marginLeft: 12 }}
          >
            女
          </Button>
        </div>
      </Col>

      {/* 右侧图片 + 结果 */}
      <Col span={16} style={{ textAlign: 'center' }}>
        {showRes && (
          <>
            <Title level={3} style={{ marginBottom: 16 }}>
              {showRes === '预测正确' ? (
                <Text type="success" style={{fontSize:30}}>预测正确</Text>
              ) : (
                <Text type="danger" style={{fontSize:30}}>预测失败</Text>
              )}
            </Title>
            <Image
              src={`${process.env.PUBLIC_URL}${cur.图片路径}`}
              alt="结果图"
              style={{ maxHeight: 400, objectFit: 'contain' }}
            />
            <Title level={3} style={{ marginTop: 16 }}>
              姓名：<Text style={{fontSize:24}}>{cur.姓名}</Text>
            </Title>
          </>
        )}
      </Col>
    </Row>
  );
};

export default CheckPythonResult;